<template>
  <div>
    <!-- vant搜索 -->
    <van-search
      @search="onSearch"
      @clear="onClear"
      show-action
      shape="round"
      v-model="kw"
      placeholder="请输入搜索关键词"
    >
      <template #left>
        <van-icon
          @click="back"
          style="margin-right: 5px"
          size="22px"
          name="arrow-left"
        />
      </template>

      <template #action>
        <van-button
          @click="onSearch"
          size="small"
          color="#f5b400"
          style="border-radius: 5px; font-size: 14px"
          >搜索</van-button
        >
      </template>
    </van-search>

    <!-- 搜索历史 -->
    <div>
      <div class="search-host">
        <span>搜索历史：</span>
        <van-icon name="delete" @click="delHistory" />
      </div>

      <div>
        <van-tag
          v-for="(item, index) in kwList"
          @click="searchTs(item)"
          style="margin: 5px"
          :key="index"
          >{{ item }}</van-tag
        >
      </div>
    </div>

    <!-- 搜索结果 -->
    <div v-if="orderList" class="orderInfo">
      <van-card
        v-for="item in orderList"
        :key="item.id"
        :num="item.room_num"
        :tag="item.oid == 0 ? '待付款' : '已完成'"
        :price="`${item.room_prcie.toFixed(2)}`"
        :desc="`订单编号XED${item.id}00364521`"
        :title="item.hotel_title"
        :thumb="item.room_img"
        @click="seeMore(item.id)"
      >
        <template #tags>
          <van-tag plain type="danger">{{ item.room_type }}</van-tag>
        </template>
        <template #footer>
          <van-button size="normal" @click.stop="delOrder(item.id)"
            >删除</van-button
          >
          <van-button size="normal" @click.stop="orderAgain(item.hid)"
            >再次预订</van-button
          >
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import { mapState } from "vuex";

export default {
  data() {
    return {
      kw: "",
      kwList: [], //搜索历史
    };
  },
  computed: {
    ...mapState({ orderList: (state) => state.order.orderList }),
  },
  mounted() {
    this.kwList = JSON.parse(localStorage.kwList);
  },
  methods: {
    back() {
      //返回
      this.$router.push({
        path: "/orderlist",
      });
    },
    getData() {
      let uid = sessionStorage.getItem("uid");
      this.$store.dispatch("searchOrder", { uid, kw: this.kw });
    },
    // 删除订单
    delOrder(id) {
      Dialog.confirm({
        title: "确认删除订单?",
        message: "删除后订单记录将无法恢复?",
      })
        .then(() => {
          let res = this.$store.dispatch("delOrder", id);
          res.then(() => {
            Toast("删除成功");
            this.getData();
          });
        })
        .catch(() => {
          Toast("取消删除");
        });
    },
    // 再次预定
    orderAgain(hid) {
      this.$router.push(`/hotel?id=${hid}`);
    },
    // 查看详情
    seeMore(id) {
      this.$router.push(`/orderdetail?id=${id}`);
    },
    // 搜索記錄搜索
    searchTs(title) {
      this.kw = title;
      this.getData();
    },
    // 搜索按鈕搜索
    onSearch() {
      if (this.kw.trim() == "") {
        //判断内容是否为空
        return;
      }
      this.getData();
      if (!this.kwList.includes(this.kw.trim())) {
        //不会重复添加相同搜索记录
        this.kwList.unshift(this.kw);
        localStorage.kwList = JSON.stringify(this.kwList);
      }
    },
    // 清空搜索框
    onClear() {
      this.kw = "";
      this.getData();
    },
    //清除搜索历史
    delHistory() {
      this.$dialog
        .confirm({
          message: "确定要清空搜索历史吗？",
        })
        .then(() => {
          this.kwList = [];
          localStorage.kwList = JSON.stringify(this.kwList);
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.search-host {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
  box-sizing: border-box;
}
//详情卡片
//订单展示页卡片
.van-card {
  padding: 1rem 1rem;
  font-size: 1.25rem;
}
//酒店标题
::v-deep .van-card__title {
  font-weight: 600;
  line-height: 2rem;
  font-size: 1rem;
}
//入住日期时间描述
::v-deep .van-card__desc {
  color: grey;
  line-height: 1.125rem;
  font-size: 0.95rem;
}
//左上标签
.van-tag--mark {
  color: #fff;
  background-color: #666;
}
//右下标签
.van-tag--danger.van-tag--plain {
  color: #666;
}
//右下房间数量
::v-deep.van-card__num {
  color: black;
  font-size: 1rem;
}
//价格栏
::v-deep .van-card__price {
  font-size: 1rem;
  font-weight: bold;
  color: #000;
}
//自定义图片
::v-deep .van-card__thumb {
  width: 5.625rem;
  height: 5.625rem;
}
//按钮
::v-deep .van-card__footer .van-button {
  border-radius: 10%;
  border: 0.0625rem solid whitesmoke;
  background-color: #f5b400;
}
.van-button {
  height: 2rem;
}
//按钮内置文字样式
::v-deep .van-button__content {
  color: #fff;
}
//俩按钮的间距
.van-card__footer .van-button {
  margin-left: 0.625rem;
}
</style>
